<template>
	<view>
		<!-- 头部背景 -->
		<view class="headCss"></view>
		<!-- 统计面板 -->
		<view class="headText">
			<!-- 今日/昨日 -->
			<view class="dayBtn">
				<text :class="isToday?'isYes':'isNo'" @click="changeDay('today')">今日</text>
				<text :class="isToday?'isNo':'isYes'" @click="changeDay('yesterday')">昨日</text>
				<text>
					<view class="time">
						<!-- <image src="/static/images/预约挂号.png" mode=""></image> -->
							<uni-data-select class="change"  v-model="value"  placeholder="自定义"  align="right"  :localdata="range" @change="change"></uni-data-select>
					</view>
					
				</text>

				
			</view>
			<!-- 分割线 -->
			<view class="div-line"></view>
			<!-- 收入/订单 -->
			<view class="get-order">
				<view class="GO">
					<image src="/static/images/收入.png" mode=""></image>
					<view class="v1">
						<text>￥</text>
						<text>2066.56</text>
					</view>
					<view class="v2">
						<text>收入</text>
					</view>
				</view>

				<view class="Or">
					<image src="/static/images/订单.png" mode=""></image>
					<view class="v1">
						<text></text>
						<text>53</text>
					</view>
					<view class="v2">
						<text>订单量</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 收入分布 -->
		<view class="headText fenge">
			<view class="earnings-text">
				收入分布
			</view>
			<view class="div-line" />

			<view class="charts-box">
				<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
			</view>
		</view>



		<!-- 订单分布 -->
		<view class="headText fenge">
			<view class="earnings-text">
				订单分布
			</view>
			<view class="div-line" />

			<view class="charts-box">
				<qiun-data-charts type="column" :opts="column" :chartData="columnChart" />
			</view>
		</view>

		<!-- 底部空白 -->
		<view class="div-bottom" />



	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				range: [
					{
						"value": 0,
						"text": "一周内"
					}, {
						"value": 1,
						"text": "一个月内",
					}, {
						"value": 2,
						"text": "三个月内"
					}, {
						"value": 3,
						"text": "半年内",
					}, {
						"value": 4,
						"text": "一年内"
					}
				],
				isToday: true,
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					rotate: false,
					rotateLock: false,
					color: ["#fd7aa4", "#947fff", "#fdc77a"],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "营业额", // 设置为空字符串可以隐藏中心标题
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "", // 设置为空字符串可以隐藏中心副标题
						fontSize: 12,
						color: "#999999"
					},
					extra: {
						ring: {
							ringWidth: 20,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				columnChart: {},
				column: {
					color: ["#FAC858", "#EE6666", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							linearType: "custom",
							seriesGap: 5,
							linearOpacity: 0.5,
							customColor: [
								"#FA7D8D",
								"#EB88E2"
							]
						}
					}
				}
			}
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
								"name": "保养",
								"value": 1566.56
							}, {
								"name": "洗车",
								"value": 500
							}]
						}]
					};
					// 计算总和（用于图例的百分比）
					const total = res.series[0].data.reduce((sum, item) => sum + item.value, 0);

					// 关键处理：为每个数据项添加自定义标签
					res.series[0].data.forEach(item => {
						// 保存原始值用于标签显示
						item.label = item.value.toFixed(2); // 格式化原始数值

						// 计算百分比用于图例
						const percentage = ((item.value / total) * 100).toFixed(1);
						item.name = `${item.name} ${percentage}%`; // 图例显示名称+百分比
					});

					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);

				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["维修", "保养", "洗车"],
						series: [{
							name: "订单数",
							data: [300, 170, 346]
						}]
					};
					this.columnChart = JSON.parse(JSON.stringify(res));
				}, 500);


			},
			changeDay(day) {
				console.log(day);
				if (day === 'today') {
					this.isToday = true
				} else if (day === 'yesterday') {
					this.isToday = false
				}
			}
		}
	};
</script>
<style scoped>
	.headCss {
		background-color: #3385fd;
		width: 750rpx;
		height: 300rpx;
		position: fixed;
	}

	.headText {
		background-color: #fff;
		border-radius: 20rpx;
		width: 710rpx;
		height: 500rpx;
		margin-left: 20rpx;
		position: relative;
	}

	.dayBtn>text {
		margin-top: 30rpx;
		display: inline-block;
	}

	.dayBtn>text:nth-child(1) {
		/* background-color: #2f81fa;
		color: #f2f2f2; */
		line-height: 60rpx;
		height: 60rpx;
		width: 130rpx;
		text-align: center;
		margin-left: 225rpx;
		border-radius: 40rpx 0rpx 0rpx 40rpx;
	}

	.dayBtn>text:nth-child(2) {
		/* background-color: #f2f2f2;
		color: #2f81fa; */
		line-height: 60rpx;
		height: 60rpx;
		width: 130rpx;
		text-align: center;
		border-radius: 0rpx 40rpx 40rpx 0rpx;
	}

	.isYes {
		background-color: #2f81fa;
		color: #f2f2f2;

	}

	.isNo {
		background-color: #f2f2f2;
		color: #2f81fa;
	}

	

	.div-line {
		width: 670rpx;
		margin: 20rpx 20rpx 80rpx 20rpx;
		height: 10rpx;
		background-color: #f7f7f7;
		border-radius: 10rpx;
	}

	.get-order {
		width: 220rpx;
		height: 220rpx;
		/* border: 1rpx solid black; */
		margin-left: 120rpx;
		display: flex;
	}

	.GO {
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		border-radius: 30rpx;
	}

	.GO>image {
		width: 70rpx;
		height: 70rpx;
		margin: 20rpx 75rpx 10rpx;
	}

	.v1 {
		text-align: center;
	}

	.v1>text:nth-child(1) {
		font-size: small;
	}

	.v1>text:nth-child(2) {
		font-size: larger;
		font-weight: bold;
	}

	.v2 {
		text-align: center;
	}

	.Or {
		margin-left: 40rpx;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		border-radius: 30rpx;
	}

	.Or>image {
		width: 70rpx;
		height: 70rpx;
		margin: 20rpx 75rpx 10rpx;

	}

	/* 收入分布 */
	.fenge {
		margin-top: 20rpx;
	}

	.earnings-text {
		font-size: large;
		font-weight: bold;
		padding: 20rpx 20rpx 0rpx 20rpx;
	}

	.charts-box {
		width: 100%;
		height: 300rpx;
	}

	/*  */
	.dayBtn>text:nth-child(3) {
		/* border: 1rpx solid black; */
		width: 130rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		margin-left: 40rpx;
	}
	.time{
		position: relative;
		display: inline-block;
		width: 180rpx;
		height: 130rpx;
	}
	.change{
		text-align: left;
		font-size: 20rpx;
	}
	.time>image{
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		left: -30rpx;
		top:20rpx;
	}
	

	/* 底部空白 */
	.div-bottom {
		width: 500rpx;
		height: 100rpx;
	}
</style>